/**
*/
<template>
    <div>
        <div ref="map" id="map"></div>
        <!--  <div class="btns">
              <button @click="showStyle('circle')">显示样式circle</button>
              <button @click="showStyle('icon')">显示样式icon</button>

              <button @click="addMarkers">添加自定义图标</button>
          </div>-->

        <div id="mouse-position"></div>
        <form>
            <label>Projection</label>
            <select id="projection">
                <option value="EPSG:4326">EPSG:4326</option>
                <option value="EPSG:3857">EPSG:3857</option>
            </select>
            <label>Precision</label>
            <input id="precision" type="number" min="0" max="12" value="4"/>
        </form>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, View} from "ol";
    import TileLayer from "ol/layer/Tile";
    import XYZ from "ol/source/XYZ";
    import {defaults, MousePosition} from "ol/control"
    import {createStringXY, toStringXY, toStringHDMS} from "ol/coordinate"

    export default {
        name: "OlCoordinatePack",
        data() {
            return {
                map: null,
            };
        },
        mounted() {
            // 创建地图
            this.initMap();
        },
        methods: {
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                // 创建MousePosition控件
                var mousePositionControl = new MousePosition({
                    coordinateFormat: createStringXY(4),      // 将坐标保留4位小数位，并转换为字符串
                    projection: 'EPSG:4326',                                // 定义投影
                    className: 'custom-mouse-position',                     // 控件的CSS类名
                    target: document.getElementById('mouse-position'),      // 将控件渲染在该DOM元素中
                    undefinedHTML: '&nbsp;'                                 // 鼠标离开地图时，显示空格
                });

                this.map = new Map({
                    target: "map",
                    controls: defaults().extend([mousePositionControl]),  // 将鼠标位置控件加入到地图默认控件中
                    view: new View({
                        center: [120.0, 30.0],
                        zoom: 10,
                        projection: "EPSG:4326",
                    }),
                });

                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                this.map.addLayer(gaodeLayer);

                var projectionSelect = document.getElementById("projection");   // 选取投影的控件
                projectionSelect.addEventListener('change', function (event) {
                    // 使mousePositionControl控件的投影与选取投影控件选取的投影一致
                    mousePositionControl.setProjection(event.target.value);
                });

                var precisionInput = document.getElementById('precision');
                precisionInput.addEventListener('change', function (event) {
                    // 设置mousePositionControl控件的坐标格式
                    var format = createStringXY(event.target.valueAsNumber);

                    console.log('设置mousePositionControl控件的坐标格式: ', format);
                    mousePositionControl.setCoordinateFormat(format);
                });

                this.map.on('click', function (evt) {
                    console.log(toStringXY(evt.coordinate, 4));
                    console.log(toStringHDMS(evt.coordinate, 4))
                });
            },
        }
    };

</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100px;
        left: 10px;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }

    .btns {
        position: fixed;
        top: 100px;
        left: 200px;
    }
</style>